<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <div th:include="Introduce/head"></div>
</head>
<style>
    .loginDiv {
        z-index: 10000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;


        background: white;
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
        border-radius: 10px; /*登录窗口边角圆滑*/
    }

    .loginDiv label {
        width: 0px;

    }

    .layui-input-block {
        margin-left: 50px
    }
    .form-login{
        padding: 30px;
    }
    .triangle-topleft {
        width: 0;
        height: 0;
        border-top: 60px solid #009688;
        border-right: 80px solid transparent;

    }
</style>
<body>

<div class="layui-carousel" id="carousel">
    <div carousel-item>
        <img src="/static/image/login.jpg">
        <img src="/static/image/login-2.png">
    </div>
</div>
</body>
<div class="loginDiv">
    <p class="triangle-topleft"></p>
    <i style="position: absolute; top: 2px;left: 5px;">
        <a href="javascript:requestQRcode()"> <img  width="23px" src="/static/image/scanQRcode.png"></a>
    </i>
    <div class="form-login">
    <div style="text-align: center;font-size: 16px">欢迎使用</div>
    <hr style="margin-bottom: 30px">
    <form class="layui-form" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
            <div class="layui-input-block">
                <input type="text" name="userName" id="userName" required lay-verify="required" min="6" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" required lay-verify="required" min="6" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <a href="javascript:register()">还没有账号？点我注册</a>
        <button id="submit" style="margin-top: 20px" type="button"  lay-filter="formDemo" lay-submit class="layui-btn layui-btn-fluid">登录</button>
    </form>
    </div>

</div>

<script>
    layui.use(['carousel', 'layer','form'], function () {
        var carousel = layui.carousel
        var form = layui.form;
        var layer= layui.layer;
        //建造实例
        carousel.render({
            elem: '#carousel'
            , full: true
            , arrow: 'none' //始终显示箭头
            , indicator: 'none'//始终不显示指示器
            , anim: 'fade' //切换动画方式
            , interval: 3500 //5秒切换
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            login(JSON.stringify(data.field));
            return false;//防止表单提交两次
        });

    });
    function login(data){
        $.ajax({
            url: '/user/login',
            type: 'POST',
            data: data,
            async:false,
            contentType: 'application/json;charset=UTF-8',
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    window.location = '/home/workpalte';
                }
                if (res.code == 500) {
                    layer.msg(res.msg);
                }

            }
        })
    }
    function register(){
       layer.open({
            type:2,
            title:"注册",
            content:'/home/register',
            area:['600px','700px']
        })
    }
    function callbackRegister(data){
        login(data);
    }
    function requestQRcode() {
        $('#form').hide();
        $('.form-login').append("<img class=\"layui-anim layui-anim-fadein\" width='345px' height='300px' src='/home/getQRcodebylogin'></img>");

    }

</script>


</html>